<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'

  export default {
    name: 'w-split',
    mixins: [WidgetBase],
    props: ['collapsedIcon', 'expandedIcon', 'movable', 'range', 'toNext', 'expanded'],
    inject: ['provideLayout'],
    created() {
      this.$watch('expanded', (v) => {
        if (typeof v === 'boolean') this.x.expanded = v
        else if (this.x.expanded == null) this.x.expanded = true
      }, {immediate: true})
    },
    methods: {
      toggle(exp) {
        this.x.expanded = exp == null ? !this.x.expanded : exp
        let minorElem = this.x.toNext ? this.el().nextElementSibling : this.el().previousElementSibling
        if (minorElem) {
          $.q(minorElem).toggleClass('f-split-collapsed', !this.x.expanded)
          //$.q(minorElem).css(this.expanded ? {visibility: '', position: '', zIndex: ''} : {visibility: 'hidden', position: 'absolute', zIndex: -1})
        }
      },
      dragstart(e) {
        let prevElem = this.el().previousElementSibling
        let nextElem = this.el().nextElementSibling
        if (prevElem && nextElem) {
          let vert = this.inVertical
          let minorElem = this.x.toNext ? nextElem : prevElem
          let downX = $.eventX(e)
          let downY = $.eventY(e)
          let posName = vert ? 'top' : 'left'
          let sizeName = vert ? 'height' : 'width'
          let clientName = vert ? 'clientY' : 'clientX'
          let downPos = vert ? downY : downX
          let minPos = $.bcr(prevElem)[posName]
          let maxPos = $.bcr(nextElem)[vert ? 'bottom' : 'right'] - 5
          let movRect = $.lodash.pick($.bcr(this.$refs.movable), ['width', 'height', 'top', 'left'])
          let pos
          let help
          $.moveup((e) => {
            if (!help) {
              help = $.q(`<div style="position:absolute;background:rgba(0,0,0,.3);z-index:101;"></div>`).css(
                movRect).appendTo(document.body)
            }
            pos = $.numRange(movRect[posName] + e[clientName] - downPos, minPos, maxPos)
            help.css({
              [posName]: pos
            })
          }, (e) => {
            if (help) {
              help.remove()
              let size = (this.x.expanded ? $.bcr(minorElem)[sizeName] : 0) + (this.x.toNext ? 1 : -1) * (downPos -
                pos)
              if (size <= 0) {
                this.toggle(false)
              } else {
                if (!this.x.expanded) this.toggle(true)
                $.q(minorElem).css({
                  [sizeName]: size
                })
              }
            }
          }, e)
        }
      },
      html_slots() {
        let r = []
        let expandedIcon = this.x.expandedIcon || this.x.collapsedIcon
        let collapsedIcon = this.x.collapsedIcon || expandedIcon
        if (expandedIcon) {
          r.push(this.html_icon(this.x.expanded ? expandedIcon : collapsedIcon, 'w-split-icon', () => this.toggle()))
        }
        if (this.x.movable) {
          r.push(h('div', {
            ref: 'movable',
            class: 'w-split-movable',
            onmousedown: this.dragstart
          }))
        }
        return r
      }
    },
    computed: {
      inVertical() {
        return this.provideLayout === 'w-vertical'
      },
      html_props() {
        return {
          class: ['f-rel z-' + (this.inVertical ? 'vertical' : 'horizontal'), {
            'z-tonext': this.x.toNext
          }]
        }
      }
    },
    mounted() {
      if (!this.x.expanded) {
        this.toggle(false)
      }
    }
  }
</script>

<style>
  .f-split-collapsed {
    position: absolute !important;
    visibility: hidden !important;
    z-index: -1;
    opacity: 0;
  }

  .w-split-icon {
    position: absolute;
    cursor: pointer;
    line-height: 1;
    z-index: 1;
  }

  .w-split.z-vertical .w-split-icon {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .w-split.z-vertical.z-tonext .w-split-icon {
    top: auto;
    bottom: 0;
  }

  .w-split.z-horizontal .w-split-icon {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .w-split.z-horizontal.z-tonext .w-split-icon {
    left: auto;
    right: 0;
  }

  .w-split-movable {
    position: absolute;
  }

  .w-split.z-vertical .w-split-movable {
    height: 100%;
    min-height: 5px;
    top: 0;
    left: 0;
    right: 0;
    cursor: row-resize;
  }

  .w-split.z-horizontal .w-split-movable {
    width: 100%;
    min-width: 5px;
    left: 0;
    top: 0;
    bottom: 0;
    cursor: col-resize;
  }
</style>
